<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>新增演出计划</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/show/bootstrap-4.0.0-dist/css/bootstrap.css">
    <script type="text/javascript" src="/show/bootstrap-4.0.0-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="/show/layui2.5.7/css/layui.css" media="all">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/show/css/font.css">
    <link rel="stylesheet" href="/show/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/show/layui2.5.7/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/show/js/xadmin.js"></script>
</head>
<style>
    #step1{
        display:block;
        width: 100%;
        /*height: ;*/
    }
    #step2,#step3{
        display: none;
    }
    #step1,#step2,#step3{
        position: absolute;
        width: 100%;
        height: 40%;
        /*left: 2%;*/
    }
    .layui-transfer-data{
        height:320px
    }
    .layui-transfer-box{
        width:380px !important;
    }

</style>
<body>

<!-- 下一步，下一步 -->
<div id="step1" >
    <div class="progress" style="height: 1px;">
        <div class="progress-bar" role="progressbar" style="width: 33%;" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>添加演出节目</legend>
            </fieldset>
        </div>
        <div class="panel-body" style="margin-left: 2%">
            <div id="test1" class="demo-transfer"></div>
        </div>
        <div class="layui-btn-container" style="margin-left: 2%">
            <button type="button" class="layui-btn" lay-demotransferactive="getData">确定所选节目</button>
        </div>
            <br><br>
            <button class="layui-btn layui-btn-sm" style="margin-left: 2%" onclick="getnext('step2'),setAct()" >下一步</button>
            <br><br>
    </div>
</div>
<div id="step2">
    <div class="progress" style="height: 1px;">
        <div class="progress-bar" role="progressbar" style="width: 66%;" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>安排表演时间</legend>
            </fieldset>
        </div>
        <br><br>
        <div class="panel-body" style="margin: 6px;padding: 4px;margin-left: 2%">
            <form id="actTime">
                <table id="actTable">

                </table>
            </form>
            <br><br>
            <button class="layui-btn layui-btn-sm" onclick="getnext('step1')">上一步</button>
            <button class="layui-btn layui-btn-sm" onclick="getnext('step3')">下一步</button>
            <br><br><br><br><br><br><br><br><br><br>
        </div>
    </div>
</div>
<div id="step3">
    <div class="progress" style="height: 1px;">
        <div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>计划编号</legend>
            </fieldset>
        </div>
        <div class="panel-body" style="margin-left: 2%">
            <div class="layui-input-inline" style="height: 50px;width: 0px">
                <input type="text" style="height: 28px;width: 150px" id="planItem" name="planItem" placeholder="计划编号" required="" lay-verify="required" />
            </div>
            <br>
            <button class="layui-btn layui-btn-sm" onclick="getnext('step2')">上一步</button>
            <button class="layui-btn" onclick="checkPlan()">
                保存
            </button>
        </div>
    </div>
</div>

<!-- 下一步，下一步 -->
</body>
<script>

    var choosedAct = "";
    layui.use(['transfer', 'layer', 'util','element'], function() {
        var $ = layui.$
            , transfer = layui.transfer
            , layer = layui.layer
            , util = layui.util;

        var data1="";

        //传值
        $.ajax({
            url: "/plan/actValue",
            async: false,
            type: "POST",
            dataType: "json",
            success: function (data) {
                data1=data;
            }
        })

        //定义标题及数据源
        transfer.render({
            elem: '#test1'
            , title: ['已启用的表演节目', '已选中的表演节目']  //自定义标题
            , id: 'demo1'
            , data:data1
            , width: 200 //定义宽度
        });
        //批量办法定事件
        util.event('lay-demoTransferActive', {
            getData: function (othis) {
                var getData = transfer.getData('demo1'); //获取右侧数据
                choosedAct = JSON.stringify(getData);
                layer.msg('已保存!', {icon: 1, time: 1000});
            }
        })
    });


    function getnext(i){
        var sz = new Array("step1","step2","step3");
        for(var j=0;j<sz.length;j++){
            if(i==sz[j]){
                document.getElementById(i).style.display="block";
            }else{
                document.getElementById(sz[j]).style.display="none";
            }
        }
    }

    function setAct() {
        $("#actTable").html("");
        $.each(JSON.parse(choosedAct),function (i,val) {
            console.log(val["title"]);
            console.log(val["value"]);
            var input1 = $("<input type='hidden' class='layui-input-inline' name='activityId'>").val(val["value"]);
            var th1 = $("<th colspan='3'  style='font-size: 20px ;text-align: left' ></th>").text(val["title"]);
            var tr1 = $("<tr><td style='font-size: 10px;margin: 9px'>工作日演出时间: <input type='text' style='height: 23px;" +
                "width: 115px' class='layui-input-inline' name='showWorkdayTime'></td>" +
                "<td style='font-size: 10px;margin: 40px'>周末演出时间: <input type='text' style='height: 23px;" +
                "width: 115px' class='layui-input-inline' name='showWeekdayTime'</td>" +
                "<td style='font-size: 10px;margin: 20px'>停演时间: <span style='margin: 7px'><select style='width: 125px;" +
                "height: 27px' name='showStopWeekday' class='layui-input-inline'>\n" +
                "                    <option value='null'>无</option>\n" +
                "                    <option value='周一'>周一</option>\n" +
                "                    <option value='周二'>周二</option>\n" +
                "                    <option value='周三'>周三</option>\n" +
                "                    <option value='周四'>周四</option>\n" +
                "                    <option value='周五'>周五</option>\n" +
                "                    <option value='周六'>周六</option>\n" +
                "                    <option value='周日'>周日</option>\n" +
                "                </select></td></tr>")
            var br1 = $("<br>");
            var br2 = $("<br>");


            $("#actTable").append(input1,th1,tr1);
        });
    }

        //新增按钮
        function checkPlan(){
            var activityId="";
            var showWorkdayTime="";
            var showWeekdayTime="";
            var showStopWeekday="";
            var planItem = document.getElementById("planItem").value;
            for(var i=0;i<document.getElementsByName("activityId").length;i++){
                activityId += document.getElementsByName("activityId")[i].value + ",";
            }
            for(var i=0;i<document.getElementsByName("showWorkdayTime").length;i++){
                if (document.getElementsByName("showWeekdayTime")[i].value==""){
                    showWorkdayTime += "null"+",";
                }else {
                    showWorkdayTime += document.getElementsByName("showWorkdayTime")[i].value + ",";
                }
            }
            for(var i=0;i<document.getElementsByName("showWeekdayTime").length;i++){
                if (document.getElementsByName("showWeekdayTime")[i].value==""){
                    showWeekdayTime += "null"+",";
                }else {
                    showWeekdayTime += document.getElementsByName("showWeekdayTime")[i].value + ",";
                }
            }
            for(var i=0;i<document.getElementsByName("showStopWeekday").length;i++){
                showStopWeekday += document.getElementsByName("showStopWeekday")[i].value + ",";
            }

            $.ajax({
                url: "/plan/add",
                async: false,
                type: "POST",
                dataType: "json",
                data: {
                    "activityId":activityId,
                    "showWorkdayTime":showWorkdayTime,
                    "showWeekdayTime":showWeekdayTime,
                    "showStopWeekday":showStopWeekday,
                    "planItem":planItem
                },
                success: function (data) {
                    if (data.info == "success") {
                        //获得frame索引
                        var index = parent.layer.getFrameIndex(window.name);
                        //关闭当前frame
                        parent.layer.close(index);
                        //刷新
                        parent.window.location.replace("/plan/planList")
                    } else {
                        layer.msg('添加失败，请检查计划内容是否正确!', {icon: 1, time: 1000});
                    }
                }
            })
        }


</script>
</html>